<template>
  <div>
    <h1 id="hellow">{{ word }}</h1>
    <h2 id="hellow">{{ word }}</h2>
    <button @click="uodatas">点击</button>
  </div>
</template>

<script>
export default {
  beforeCreate() {
    console.log(this.word);
    console.log("vue创建实例化对象,访问不了data里面的数据");
  },
  created() {
    console.log("可以访问data里面的数据，可以发起axios请求执行事件函数");
    console.log(this.word);
    this.getaxios();
    this.tiremr = setInterval(() => {
      console.log(1);
    }, 1000);
  },
  beforeMount() {
    //生成虚拟dom 不能获取页面元素
    console.log(document.getElementById("hellow"));
  },
  mounted() {
    // 可以获取dom节点
    console.log(document.getElementById("hellow"));
  },
  beforeUpdate() {
    // 页面数据更改之前执行
    console.log("更新之前");
    console.log(document.getElementById("hellow").innerHTML);
  },
  updated() {
    // 页面数据更改之后执行
    console.log("更新之后");
    console.log(document.getElementById("hellow").innerHTML);
  },
  beforeDestroy() {
    // 通常用来释放内存事件 比如说定时器  
    console.log("组件销毁前执行");
    clearInterval(this.tiremr);
  },
  destroyed() {
    console.log("组件销毁后执行");
  },
  data() {
    return {
      word: "123456",
    };
  },
  methods: {
    async getaxios() {
      const { data: res } = await this.$http.get("/api/getbooks");
      console.log(res);
    },
    uodatas() {
      this.word = "789";
    },
  },
};
</script>

<style></style>
